<template>
	<view class="tree">
		<!-- 父级-tree -->
		<view v-if="!isItRecursiveCall">
			<view class="tree-father" v-for="item in treeData" :key="item.id" @click="modifyTheStatusOfTheTreeComponent(item)">
				<view style="display: flex; padding: 10rpx 0;">
					<!-- 倒三角-打开 -->
					<u-icon name="arrow-down-fill" v-if="item.nodeIsFlag" color="#888" size="16"></u-icon>
					<!-- 倒三角-关闭 -->
					<u-icon name="arrow-up-fill" v-else color="#888" size="16"></u-icon>
					<!-- 父级-名字 -->
					<view class="father-name" style="margin-left: 20rpx;">{{item.name}}</view>
				</view>

				<!-- 子级组件 -->
				<view v-show="item.nodeIsFlag" style="padding-left: 80rpx;">
					<view class="sub-node" style="flex-direction: column;" v-for="ite in item.children" :key="ite.id" @click.stop="subLevelNodeClickVents(ite,item.id)">
						<view style="display: flex;
												 justify-content: space-between;
												 width: 100%;
												 padding: 10rpx 0;
												 align-items: center;">
							<!-- 子级-名字 -->
							<view class="sub-name">{{ite.name}}</view>
							<!-- 详情 > -->
							<view style="display: flex;">
								<!-- 详情 -->
								<view @click.stop="detailEvent(ite)" class="detailClass">详情</view>
								<!-- 倒三角-打开 -->
								<u-icon name="arrow-down" v-if="ite.nodeIsFlag && ite.children.length > 0" color="#888" size="16"></u-icon>
								<!-- 倒三角-关闭 -->
								<u-icon name="arrow-right" v-if="!ite.nodeIsFlag && ite.children.length > 0" color="#888" size="16"></u-icon>
							</view>
						</view>

						<!-- 调用组件递归 -->
						<view v-if="ite.children && ite.children.length > 0">
							<treeComponent :treeDataS="ite.children" :isItRecursiveCall="true" v-show="ite.nodeIsFlag"></treeComponent>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 子级-tree-递归组件 -->
		<view style="padding-left: 50rpx;" v-if="isItRecursiveCall">
				<!-- 子级-tree -->
				<view>
					<view class="sub-node" v-for="item in treeData" :key="item.id" @click.stop="isItRecursiveCallClickEvents(item)" style="display: flex;flex-direction: column;">

						<view style="display: flex;
								justify-content: space-between;
								width: 100%;
								padding: 10rpx 0;
								align-items: center;">
							<!-- 子级-名字 -->
							<view class="sub-name">{{item.name}}</view>
							<!-- 详情 > -->
							<view style="display: flex;">
								<!-- 详情 -->
								<view @click.stop="detailEvent(item)" class="detailClass">详情</view>
								<!-- 倒三角-打开 -->
								<u-icon name="arrow-down" v-if="item.nodeIsFlag && item.children.length > 0" color="#888" size="16"></u-icon>
								<!-- 倒三角-关闭 -->
								<u-icon name="arrow-right" v-if="!item.nodeIsFlag && item.children.length > 0" color="#888" size="16"></u-icon>
							</view>
						</view>

						<!-- 调用组件递归 -->
						<view v-if="item.children && item.children.length > 0">
							<treeComponent :treeDataS="item.children" :isItRecursiveCall="true" v-show="item.nodeIsFlag"></treeComponent>
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
/**
 * 引入组件
 */
import treeComponent from "@/safetyProductionResponsibilitySystem/components/tree/index.vue"

export default {
	/**
	 * 组件名称
	 */
	name: 'components-tree',

	/**
	 * 接受父级传递的数据
	 */
	props: {
		/* tree数据 */
		treeDataS: {
			type: Array,
			required: true
		},

		/* 是否是递归调用组件 */
		isItRecursiveCall: {
			type: Boolean,
			display: false
		}
	},

	/**
	 * 注册组件
	 */
	components: {
		treeComponent
	},

	/**
	 * 定义数据
	 */
	data () {
		return {
			/* 父节点是否展开 */
			fatherNodeFlag: true,
			treeData: this.treeDataS
		}
	},

	/**
	 * 定义方法
	 */
	methods: {
		/* 父级节点-点击事件 */
		modifyTheStatusOfTheTreeComponent (rowData) {
			this.treeData = this.treeData.map(item => {
				if(item.id == rowData.id) {
					if (item.nodeIsFlag == "undefined") {
						item.nodeIsFlag = true;
					} else {
						item.nodeIsFlag = !item.nodeIsFlag
					}
				}
				return item
			})
		},
		
		/* 子级节点-点击事件 */
		subLevelNodeClickVents (rowData, fatherId) {
			this.treeData = this.treeData.map(item => {
				if(item.id == fatherId) {
					item.children = item.children.map(ite => {
						if(ite.id == rowData.id) {
							if (ite.nodeIsFlag == "undefined") {
								ite.nodeIsFlag = true;
							} else {
								ite.nodeIsFlag = !ite.nodeIsFlag
							}
						}
						return ite
					})
				}
				return item
			})
		},

		/* 详情 */
		detailEvent (rowData) {
			uni.navigateTo({
				url: `/safetyProductionResponsibilitySystem/securityOrganizationManagement/positionList/index?deptId=${rowData.id}`
			});
		},

		/* 递归调用单击事件 */
		isItRecursiveCallClickEvents (rowData) {
			this.treeData = this.treeData.map(item => {
				if (rowData.id == item.id) {
					if (item.nodeIsFlag == "undefined") {
						item.nodeIsFlag = true;
					} else {
						item.nodeIsFlag = !item.nodeIsFlag
					}
				}
				return item
			})
		}
	},
}
</script>

<style lang="scss" scoped>
.tree {
	.tree-father {
		display: flex;
		flex-direction: column;
	}

	.sub-node {
		display: flex;
		justify-content: space-between;
		color: #888;


		.detailClass {
			margin-right: 15rpx;
			font-size: 29rpx;
			text-decoration: underline;
			color: #23a6ff;
		}
	}
}

</style>